<template>
<div class=''>
    <div class="one" id="app" align="center">
			<div id="two">
				<div id="two_left">
					<h3 style="color: dodgerblue;">商品资料</h3>
				</div>
				<div id="two_right">
					<el-row :gutter="8">
						<el-col :span="15">
							<el-input placeholder="根据商品编号模糊查询" @Change="mhselect" v-model="input" clearable>
							</el-input>
						</el-col>
						<el-col :span="3">
							<el-button icon="el-icon-search" circle></el-button>
						</el-col>
						<el-col :span="3">
							<el-button type="danger" @click="addsp()" round>添加商品</el-button>
						</el-col>
					</el-row>
					<el-dialog title="添加商品信息" :visible.sync="dialogFormVisible">
						<el-form :model="form">
							<el-row :gutter="10">
								<el-col :span="8">
									<el-form-item label="商品编号" :label-width="formLabelWidth">
										<el-input v-model="form.commno" autocomplete="off"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="商品名称" :label-width="formLabelWidth">
										<el-input v-model="form.commname" autocomplete="off"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="商品数量" :label-width="formLabelWidth">
										<el-input v-model="form.commcount" autocomplete="off"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="20">
								<el-col :span="11">
									<el-form-item label="供货位置" :label-width="formLabelWidth">
										<el-select v-model="value3" placeholder="请选择">
											<el-option v-for="item in options3" :key="item.goodsaddress" :label="item.goodsaddress" :value="item.goodsid">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="商品材料" :label-width="formLabelWidth">
										<el-select v-model="value4" placeholder="请选择">
											<el-option v-for="item in options4" :key="item.commtypename" :label="item.commtypename" :value="item.commtypeid">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="20">
								<el-col :span="11">
									<el-form-item label="收入类型" :label-width="formLabelWidth">
										<el-select v-model="value" placeholder="请选择">
											<el-option v-for="item in options" :key="item.incometypename" :label="item.incometypename" :value="item.incometypeid">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label="计算单位" :label-width="formLabelWidth">
										<el-select v-model="value2" placeholder="请选择">
											<el-option v-for="item in options2" :key="item.countunitname" :label="item.countunitname" :value="item.countunitid">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="6">
									<el-form-item label="制造国家：" :label-width="formLabelWidth">
										<el-input v-model="form.praddress" autocomplete="off"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="商品品牌：" :label-width="formLabelWidth">
										<el-input v-model="form.cclass" autocomplete="off"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="普通价格：" :label-width="formLabelWidth">
										<el-input v-model="form.cpricesl" autocomplete="off"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="VIP价格：" :label-width="formLabelWidth">
										<el-input v-model="form.vipprice" autocomplete="off"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<el-button type="primary" @click="add()">添 加</el-button>
						</div>
					</el-dialog>
				</div>
			</div>
			<div>
				<template>
					<el-table :data="tableData.list" @row-click="clickrow" border style="width: 100%">
						<el-table-column fixed prop="commno" label="商品编号" width="150">
						</el-table-column>
						<el-table-column prop="goodsaddress" label="厂商地址" width="250">
						</el-table-column>
						<el-table-column prop="commname" label="商品吗名称" width="120">
						</el-table-column>
						<el-table-column prop="incometypename" label="收入类型" width="120">
						</el-table-column>
						<el-table-column prop="commtypename" label="商品材料" width="120">
						</el-table-column>
						<el-table-column prop="commcount" label="数量" width="120">
						</el-table-column>
						<el-table-column prop="countunitname" label="单位" width="120">
						</el-table-column>
						<el-table-column prop="praddress" label="制造国家" width="120">
						</el-table-column>
						<el-table-column prop="cclass" label="商品品牌" width="120">
						</el-table-column>
						<el-table-column prop="cpricesl" label="普通价格" width="120">
						</el-table-column>
						<el-table-column prop="vipprice" label="VIP价格" width="120">
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="100">
							<template slot-scope="scope">
								<el-button @click="delteClick(scope.row.commid)" type="text" size="small">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tableData.pageNum" :page-sizes="[3, 4, 5]" :page-size="tableData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"> </el-pagination>
			</div>
			<div id="last" v-if="this.id!=''">
				<h3>详细信息</h3>
				<el-row>
					<el-col :span="12">地址：{{list.goodsaddress}}</el-col>
					<el-col :span="12">单位名称：{{list.goodsname}}</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">联系人：{{list.goodsremarks}}</el-col>
					<el-col :span="12">联系手机号：{{list.goodsphone}}</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">邮箱：{{list.goodsemail}}</el-col>
					<el-col :span="12">备注：{{list.goodsremarks}}</el-col>
				</el-row>
			</div>
		</div>
</div>
</template>

<script>
export default {
data() {
//这里存放数据
return {
input: '',
				value: '',
				value2: '',
				value3: '',
				id:'',
				value4: '',
				list:{},
				form: {
					cclass: "",
					commcount: '',
					commname: '',
					commno: '',
					incometypeid: '',
					commtypeid: '',
					countunitid: '',
					cpricesl: '',
					praddress: '',
					goodsid: '',
				},
				dialogFormVisible: false,
				formLabelWidth: '90px',
				options: [{}],
				options2: [{}],
				options3: [{}],
				options4: [{}],
				tableData: []
};
},
//计算属性
computed: {},
//方法集合
methods: {
    clickrow(a){
						this.id=a.goodsid;
						this.$http.get(`http://localhost:8080/api/gh/show3/${this.id}`).then(resp => {
							let rsdata = resp.data;
							//console.info(rsdata);
							this.list = rsdata;
						});
				},
				cha() {
						let _this = this;
						this.$http.get(`http://localhost:8080/api/pp/list2`).then(resp => {
							let rsdata = resp.data;
							//console.info(rsdata);
							_this.options = rsdata;
							console.info(_this.options);
						});
					},
					cha2() {
						let _this = this;
						this.$http.get(`http://localhost:8080/api/shop/list`).then(resp => {
							let rsdata = resp.data;
							//console.info(rsdata);
							_this.options2 = rsdata;
							console.info(_this.options);
						});
					},
					cha3() {
						let _this = this;
						this.$http.get(`http://localhost:8080/api/shop/list2`).then(resp => {
							let rsdata = resp.data;
							//console.info(rsdata);
							_this.options3 = rsdata;
						});
					},
					cha4() {
						let _this = this;
						this.$http.get(`http://localhost:8080/api/shop/list3`).then(resp => {
							let rsdata = resp.data;
							//console.info(rsdata);
							_this.options4 = rsdata;
						});
					},
					handleSizeChange(val) {
						this.show(this.tableData.pageNum, val, this.input);
					},
					handleCurrentChange(val) {
						this.show(val, this.tableData.pageSize, this.input);
					},
					addsp() {
						let _this = this;
						_this.dialogFormVisible = true;
						this.value2='';
						this.value='';
						this.value3='';
						this.value4='';
						this.form = {
							cclass: "",
					commcount: '',
					commname: '',
					commno: '',
					incometypeid: '',
					commtypeid: '',
					countunitid: '',
					cpricesl: '',
					praddress: '',
					goodsid: '',
						};
						
					},
					
					add() {
						
						if (this.form.praddress==''||this.form.cpricesl==''||this.form.commno==''||this.form.commname==''||this.form.cclass==''||this.form.commcount==''||this.value3 == '' || this.value == '' || this.value2 == '' || this.value4 == '') {
							alert("请填写完整");
							return ''
						}
						this.form.incometypeid = this.value;
						this.form.countunitid = this.value2;
						this.form.goodsid = this.value3;
						this.form.commtypeid = this.value4;
						this.$http.post('http://127.0.0.1:8080/api/shop/addsp', this.form).then(resp => {
							if (resp.data.code == "200") {
								this.show(1, 3, this.input);
								alert("新增成功！")
								this.dialogFormVisible = false;
							}
						});
					},
					mhselect() {
                      
                        let _this = this;
						_this.show(1, 3, this.input);
					},
					delteClick(id) {
						let _this = this;
						if (window.confirm('是否删除该信息?')) {
							this.$http.delete(`http://127.0.0.1:8080/api/shop/del/${id}`).then(resp => {
								if (resp.data.code == "200") {
									_this.show(1, 3, this.input);
									alert('删除成功');
								}
							});
						}
					},
					show(p, s, name) {
						if (name == '') {
							name = 'null';
						}
						let _this = this;
						this.$http.get(`http://localhost:8080/api/shop/${p}/${s}/${name}`).then(resp => {
							let rsdata = resp.data;
							//console.info(rsdata);
							_this.tableData = rsdata;
							console.info(_this.menu);
						});
					},

},
//挂载完成（可以访问DOM元素）
mounted() {
this.show(1, 3, this.input);
				this.cha();
				this.cha2();
				this.cha3();
				this.cha4();
},
//监控data中的数据变化
watch: {

}
}
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
.one {
			margin: auto;
			margin-top: 20px;
			width: 1014px;
			height: 600px;
		}
		
		#two {
			width: 1014px;
			height: 40px;
		}
		
		#two_left {
			float: left;
		}
		
		#two_right {
			float: right;
		}
		
		#last {
			height: 180px;
			width: 500px;
		}
</style>